import React, { useState, useEffect } from "react";
import { getTrainingListId } from "../../../api/sjq";
import "./training_page.scss"
import { Descriptions, Progress, Collapse } from "antd";
import {
  TeamOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
} from "@ant-design/icons";
const { Panel } = Collapse;

function Trapage(props) {
  const [item, setItem] = useState({});

  const [flag, setFlag] = useState(false);

  const [pageId, setPageId] = useState("");

  useEffect(async () => {
    await setPageId(props.id);
  }, []);

  useEffect(() => {
    const setId = async () => {
      let { data } = await getTrainingListId(pageId);
      setItem(data.data[0]);
    };
    flag && pageId && !item.beginDate && setId();
  }, [flag, pageId]);
  return (
    <div>
      <Collapse
        bordered={false}
        defaultActiveKey={[flag]}
        className="site-collapse-custom-collapse"
        onChange={() => {
          setFlag(!flag);
        }}
      >
        <Panel header="展开" key={true} className="site-collapse-custom-panel">
          {item.beginDate && (
            <>
              <Descriptions title={item.projectName}>
                <Descriptions.Item>
                  任务
                  {item.selectClassPlanByStuList.myProject[0].taskList.length}个
                </Descriptions.Item>
                <Descriptions.Item>时长{parseInt((new Date(item.endDate)*1-new Date(item.beginDate)*1)/1000/60/60/24)}天</Descriptions.Item>
                <Descriptions.Item></Descriptions.Item>
                <Descriptions.Item>{item.beginDate}</Descriptions.Item>
                <Descriptions.Item>{item.endDate}</Descriptions.Item>
              </Descriptions>
              <div className="jindu_info">
                <Progress
                  percent={item.selectClassPlanByStuList.groupProgress}
                  status="active"
                />
                <p className="spans">
                  <span>
                    <TeamOutlined className="change_color" />
                    &emsp;人员{item.selectClassPlanByStuList.members}
                  </span>
                  <span>
                    <CheckCircleOutlined className="change_color" />
                    &emsp;按期完成{item.selectClassPlanByStuList.finished}
                  </span>
                  <span>
                    <ClockCircleOutlined className="change_color" />
                    &emsp;延期未完成{item.selectClassPlanByStuList.unfinished}
                  </span>
                </p>
              </div>
              <Descriptions layout="vertical" bordered>
                <Descriptions.Item label="姓名" className="p_username">
                  {item.selectClassPlanByStuList.stuList.map((item, index) => (
                    <p key={index}>{item.username}</p>
                  ))}
                </Descriptions.Item>
                <Descriptions.Item
                  className="p_username pp_username"
                  label={item.projectName}
                ></Descriptions.Item>
                <Descriptions.Item
                  className="p_username pp_username"
                  label={"时长："+parseInt((new Date(item.endDate)*1-new Date(item.beginDate)*1)/1000/60/60/24)+"天"}
                ></Descriptions.Item>
              </Descriptions>
              <div>
                <div className="my_task">我的任务</div>
              </div>
            </>
          )}
        </Panel>
      </Collapse>
    </div>
  );
}

export default Trapage;
